import React from 'react';
import QRCode from 'react-qr-code';
import styles from '../css/code.module.css';
import left from '../assets/left.png';
class QRCodeComponent extends React.Component {
  constructor(props) {
    super(props);
    // 从sessionStorage获取数据
    this.state = {
      userid: sessionStorage.getItem("userid"),
      QRid: sessionStorage.getItem("QRid"),
      QRnickname: sessionStorage.getItem("QRnickname"),
      QRtel: sessionStorage.getItem("QRtel"),
      QRstatus: sessionStorage.getItem("QRstatus"),
      QRtotal_price: sessionStorage.getItem("QRtotal_price"),
      QRcode: sessionStorage.getItem("QRcode"),
      QRnum: sessionStorage.getItem("QRnum"),
      QRname: sessionStorage.getItem("QRname"),
      QRcreate_time: sessionStorage.getItem("QRcreate_time"),
      QRtime: sessionStorage.getItem("QRtime"),
      QRshopname: sessionStorage.getItem("QRshopname"),
      secret: ''
    };
  }

  componentDidMount() {
    const {
      QRstatus,
      QRcode,
      userid,
      QRid,
      QRtotal_price,
      QRnum,
      QRname,
      QRshopname,
      QRnickname,
      QRtel,
      QRcreate_time,
      QRtime
    } = this.state;

    const secret = `${QRstatus},${QRcode},${userid},${QRid},${QRtotal_price},${QRnum},${QRname},${QRshopname},${QRnickname},${QRtel},${QRcreate_time},${QRtime}`;
    
    this.setState({ secret });
  }

  // 返回上一页
  left = () => {
    window.history.back();
  }

  render() {
    const { QRcode, QRname } = this.state;
    // 让二维码的value属性为订单编号
    const qrValue = QRcode;

    return (
      <div className={styles.big}>
        <div className={styles.top}>
          <div style={{ width: '100%' }}>
            <div className={styles.topimg} onClick={this.left}>
              <img src={left} alt="" />
            </div>
            <div style={{ display: 'flex', justifyContent: 'center', width: '100%', alignItems: 'center' }}>
              <span id="addressName">{QRname}</span>
            </div>
          </div>
        </div>
        <div className={styles.canvas}>
          <div className={styles.white}>
            <div className={styles.yarddiv}>
              {QRcode && <QRCode value={qrValue} size={160} />}
            </div>
            <span>
              编号：<span className={styles.qrcode}>{QRcode}</span>&nbsp;
              <span onClick={this.handleCodeClick}>复制</span>
            </span>
          </div>
        </div>
      </div>
    );
  }
}

export default QRCodeComponent;    